<template>
  <div class="body">
    <section class="content-banner">
      <div class="center-block">
        <span class="title">政务服务</span>
      </div>
    </section>

    <section class="govBody center-block">
      <div class="gov-block">
        <tab-component title="个人办事">
          <tab-panel-component label="行政审批" name="approval" >
            <ul>
              <li class="gov-item" v-for="(item, index) in arr1" :key="index">
                <div class="gov-itemDes">
                  <h3><a href="#">{{item.title}}</a></h3>
                  <p>{{item.describe}}</p>
                </div>
                <div class="gov-itemCtrl">
                  <a :href="item.liBan"><i class="dtFont dtFont-lijibanli"></i>立即办理</a>
                  <router-link :to="`/govService/guide?id=${item.zhiNan}`"><i class="dtFont dtFont-banshizhinan"></i>办事指南</router-link>
                </div>
              </li>
            </ul>
          </tab-panel-component>
          <tab-panel-component label="其它事项" name="other" >
            <ul>
              <li class="gov-item" v-for="(item, index) in arr1" :key="index">
                <div class="gov-itemDes">
                  <h3><a href="#">{{item.title}}</a></h3>
                  <p>{{item.describe}}</p>
                </div>
                <div class="gov-itemCtrl">
                  <a :href="item.liBan"><i class="dtFont dtFont-lijibanli"></i>立即办理</a>
                  <router-link :to="`/govService/guide?id=${item.zhiNan}`"><i class="dtFont dtFont-banshizhinan"></i>办事指南</router-link>
                </div>
              </li>
            </ul>
          </tab-panel-component>
        </tab-component>
      </div>
      <div class="gov-block">

        <div class="QuaT">
          <h3 class="circular-title">法人办事</h3>
          <div class="QuaTle" id="QuaTle2">
            <span :class="nowIndex2===0?'active':''" @click="tabClick2(0)">行政审批</span>
            <span :class="nowIndex2===1?'active':''" @click="tabClick2(1)">其它事项</span>
          </div>
        </div>

        <div class="gov-blockBox" id="gov-blockBox2">
          <ul :class="nowIndex2===0?'active':''">
            <li class="gov-item" v-for="(item, index) in arr1" :key="index">
              <div class="gov-itemDes">
                <h3><a href="#">{{item.title}}</a></h3>
                <p>{{item.describe}}</p>
              </div>
              <div class="gov-itemCtrl">
                <a :href="item.liBan"><i class="dtFont dtFont-lijibanli"></i>立即办理</a>
                <router-link :to="`/govService/guide?id=${item.zhiNan}`"><i class="dtFont dtFont-banshizhinan"></i>办事指南</router-link>
              </div>
            </li>
          </ul>
          <ul :class="nowIndex2===1?'active':''">
            <li class="gov-item" v-for="(item, index) in arr1" :key="index">
              <div class="gov-itemDes">
                <h3><a href="#">{{item.title}}</a></h3>
                <p>{{item.describe}}</p>
              </div>
              <div class="gov-itemCtrl">
                <a :href="item.liBan"><i class="dtFont dtFont-lijibanli"></i>立即办理</a>
                <router-link :to="`/govService/guide?id=${item.zhiNan}`"><i class="dtFont dtFont-banshizhinan"></i>办事指南</router-link>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </section>

  </div>
</template>

<script>
  import { getGovList } from '@/api/govService/index'

  export default {
    name: 'govService',
    data() {
      return {
        nowIndex:0,
        nowIndex2:0,
        arr1: []
      }
    },
    mounted() {
      this.getGovList()
    },
    methods: {
      getGovList(id) {
        getGovList(id).then(res => {
          this.arr1 = res.rows
        })
      },
      tabClick(index){
        this.nowIndex = index
      },
      tabClick2(index){
        this.nowIndex2 = index
      }
    }
  }
</script>
